<template>
    <el-row>
        <el-col :span="24">
            <div style="width: 100%;height:1800px;background: #F5F7F9;overflow: hidden"
                 class="grid-content bg-purple-dark">

                <!--保养经验信息-->
                <div style="width: 65%;height: 500px;background: white;margin-left: 250px;margin-top: 20px;border-radius: 4px">
                    <div style="width: 100%;height: 40px;border-bottom: 2px solid #F5F7F9;font-size: 14px;line-height: 40px">
                        &nbsp;&nbsp;&nbsp;保养经验
                    </div>
                    <el-form ref="form" :model="form" label-width="100px" style="height: 270px">
                        <div style="margin-top: 30px;margin-left: 30px">
                            <el-form-item label="保养经验编码">
                                <el-input v-model="form.experienceCoding" disabled style="width: 300px" size="large"
                                          placeholder="系统自动生成"></el-input>
                            </el-form-item>
                            <el-form-item label="设备名称">
                                <el-input v-model="form.associatedApparatus" style="width: 300px" size="large"
                                          placeholder="请选择">
                                    <el-button slot="append" icon="el-icon-s-fold" @click="addRow"></el-button>
                                </el-input>
                            </el-form-item>
                            <el-form-item label="设备型号">
                                <el-cascader
                                    style="width: 300px"
                                    size="large"
                                    value-key="id"
                                    disabled
                                    v-model="form.equipmentType"
                                    :options="deviceTypes"
                                    :props="propes"
                                    change-on-select
                                ></el-cascader>
                            </el-form-item>
                        </div>
                        <div style="margin-top: -40px;margin-left: 550px;position: relative;top: -134px;height: 180px">
                            <el-form-item label="保养经验名称">
                                <el-input v-model="form.experienceName" style="width: 300px" size="large"
                                          placeholder="请输入"></el-input>
                            </el-form-item>
                            <el-form-item label="设备编码">
                                <el-input v-model="form.equipmentCoding" disabled style="width: 300px" size="large"
                                          placeholder="请输入"></el-input>
                            </el-form-item>
                            <el-form-item label="状态:">
                                <template>
                                    <el-radio v-model="form.experienceState" :label=1>启用</el-radio>
                                    <el-radio v-model="form.experienceState" :label=2>停用</el-radio>
                                </template>
                            </el-form-item>
                        </div>
                        <el-form-item label="保养要求" style="position: relative;top: -140px;left: 30px">
                            <el-input v-model="form.maintenanceRequirement" type="textarea" :rows="4" placeholder="请输入"
                                      style="width: 820px"></el-input>
                        </el-form-item>
                        <el-form-item label="备注" style="position: relative;top: -140px;left: 30px">
                            <el-input v-model="form.experienceComment" type="textarea" :rows="4" placeholder="请输入"
                                      style="width: 820px"></el-input>
                        </el-form-item>
                    </el-form>
                </div>

                <!--更换备件-->
                <div style="width: 65%;height: 200px;background: white;margin-left: 250px;margin-top: 20px;border-radius: 4px">
                    <div style="width: 100%;height: 40px;border-bottom: 2px solid #F5F7F9;font-size: 14px;line-height: 40px">
                        &nbsp;&nbsp;&nbsp;更换备件
                    </div>
                    <div>
                        <el-button type="primary" style="margin: 20px 20px" @click="addRow1()" round>添加</el-button>
                        <el-table :data="form.sparePart" style="width: 100%;margin-top: 10px ">
                            <el-table-column prop="name" label="序号" align="center"></el-table-column>
                            <el-table-column prop="url" label="备件名称" align="center"></el-table-column>
                            <el-table-column prop="url" label="备件编码" align="center"></el-table-column>
                            <el-table-column prop="url" label="规格型号" align="center"></el-table-column>
                            <el-table-column prop="url" label="备件类型" align="center"></el-table-column>
                            <el-table-column prop="url" label="单位" align="center"></el-table-column>
                            <el-table-column label="操作" align="center">
                                <template slot-scope="scope">
                                    <el-button type="danger" size="mini" @click="handleDelete(scope.row)">删除
                                    </el-button>
                                </template>
                            </el-table-column>
                        </el-table>
                    </div>
                </div>

                <!-- 弹出备件信息列表  -->
                <el-dialog :visible.sync="dialogVisible1" title="请选择备件" >
                    <el-form :model="SpareLedgers" label-width="80x">
                        <el-form-item label="备件编号">
                            <el-input
                                placeholder="请输入备件编号"
                                v-model="SpareLedgers.equipmentNumber"
                                style="width: 200px">
                            </el-input>
                        </el-form-item>
                        <div style="position: relative;left: 550px;top:-40px">
                            <el-form-item>
                                <el-button type="primary" @click="submitForm">提交</el-button>
                            </el-form-item>
                        </div>
                    </el-form>
                    <div style="position:relative;top: -20px">
                        <el-table :data="SpareLedgersData" style="width: 100%"
                                  @selection-change="handleSelectionChange">
                            <el-table-column type="selection" align="center"></el-table-column>
                            <el-table-column prop="spId" label="序号" align="center"></el-table-column>
                            <el-table-column prop="spName" label="备件名称" align="center"></el-table-column>
                            <el-table-column prop="spCode" label="备件编码" align="center"></el-table-column>
                            <el-table-column prop="spSpecification" label="规格型号" align="center"></el-table-column>
                            <el-table-column prop="spTypeId" label="备件类型" align="center"></el-table-column>
                            <el-table-column prop="saUnit" label="单位" align="center"></el-table-column>
                        </el-table>
                        <!--分页-->
                        <el-pagination
                            :current-page.sync="SpareLedgers.page"
                            :page-size="SpareLedgers.pagesize"
                            :page-sizes="[10, 20, 30, 40]"
                            :total="SpaTotal"
                            background
                            layout="total, sizes ,prev, pager, next, jumper"
                            style="padding: 30px 0; text-align: center"
                            @current-change="selSpareLedgers"
                            @size-change="handleSizeChanges"
                        />
                        <el-button type="primary" @click="dialogVisible1 =false"
                                   style="position: relative;top: 0px;float: right">确认
                        </el-button>
                        <el-button @click="no" style="position: relative;top: 0px;left:-30px;float: right">取消
                        </el-button>
                    </div>
                </el-dialog>

                <!--弹出设备档案列表-->
                <el-dialog :visible.sync="dialogVisible" title="请选择设备" >
                    <el-form :model="EquipmentArchives" label-width="80x">
                        <el-form-item label="设备编号">
                            <el-input
                                    placeholder="请输入设备编号"
                                    v-model="EquipmentArchives.equipmentNumber"
                                    style="width: 200px">
                            </el-input>
                        </el-form-item>
                        <div style="position: relative;left: 550px;top:-40px">
                            <el-form-item>
                                <el-button type="primary" @click="submitForm">提交</el-button>
                            </el-form-item>
                        </div>
                    </el-form>
                    <div style="position:relative;top: -20px">
                        <el-table :data="EquipmentArchivesData" style="width: 100%"
                                  @selection-change="handleSelectionChange">
                            <el-table-column type="selection" align="center"></el-table-column>
                            <el-table-column prop="archivesId" label="序号"></el-table-column>
                            <el-table-column prop="currentStatus" label="当前状态"></el-table-column>
                            <el-table-column prop="equipmentNumber" label="设备编号"></el-table-column>
                            <el-table-column prop="devicename" label="设备名称"></el-table-column>
                            <el-table-column prop="specificationsModels" label="规格型号"></el-table-column>
                            <el-table-column prop="deviceType" label="设备类型" :formatter="formatDeviceTypes"></el-table-column>
                            <el-table-column prop="placeForStorage" label="存放位置" :formatter="formatPlaceForStorage" ></el-table-column>
                        </el-table>
                        <!--分页-->
                        <el-pagination
                                :current-page.sync="EquipmentArchives.page"
                                :page-size="EquipmentArchives.pagesize"
                                :page-sizes="[10, 20, 30, 40]"
                                :total="EquTotal"
                                background
                                layout="total, sizes ,prev, pager, next, jumper"
                                style="padding: 30px 0; text-align: center"
                                @current-change="selEquipmentArchives"
                                @size-change="handleSizeChanges"
                        />
                        <el-button type="primary" @click="dialogVisible =false"
                                   style="position: relative;top: 0px;float: right">确认
                        </el-button>
                        <el-button @click="no" style="position: relative;top: 0px;left:-30px;float: right">取消
                        </el-button>
                    </div>
                </el-dialog>

                <!--最下面-->
                <div style="width: 100%;height: 50px;background: white;box-shadow: 0px -4px 4px rgb(226,228,229);position:fixed;top: 820px;z-index: 999">
                    <div style="margin-left: 700px;margin-top: 15px">
                        <el-button @click="closes">关闭</el-button>
                        <el-button type="success" @click="addEquipmentArchives()">确认</el-button>
                    </div>
                </div>
            </div>
        </el-col>
    </el-row>
</template>

<script>
export default {
    name: "",
    data() {
        return {
            dialogVisible: false,
            dialogVisible1: false,
            //添加表单数据
            form: {
                experienceCoding:'',//保养经验编码
                experienceName:'',//保养经验名称
                experienceState:'',//状态
                maintenanceRequirement:'',//保养要求
                experienceComment:'',//备注
                sparePart:[],//更换备件(数组形式存储)
                equipmentCoding:'',//设备编号
                associatedApparatus:'',//设备名称
                equipmentType:'',//设备类型
                operator:'张三',
            },
            //供应商管理信息数据
            suppliers: [],
            //人员管理树形信息数据
            PeopleManagement: [],
            //部门树形数据
            departments: [],
            //设备存放位置信息
            PlaceForStorages: [],
            propes: {
                value: 'id',
                label: 'typeName',
                children: 'children'
            },
            props: {
                value: 'departmentManagementId',
                label: 'departmentName',
                children: 'children'
            },
            //设备档案信息模糊查分页数据
            EquipmentArchives: {
                page: 1,
                pageSize: 10,
                equipmentNumber: null,//设备编号
            },
            //备件信息模糊查分页数据
            SpareLedgers: {
                page: 1,
                pageSize: 10,
                spCode: null,//备件编号
            },
            EquTotal: 0,
            SpaTotal: 0,
            //设备档案信息
            EquipmentArchivesData: [],
            //备件信息
            SpareLedgersData: [],
            //设备类型数据
            deviceTypes: [],
            //设备存放位置数据
            placeForStorages:[],

            vals: [],
            limit: 10,
            headers: {
                'Content-Type': 'multipart/form-data'
            },
            data: {
                type: 'image'
            }
        }
    },
    methods: {
        closes() {
            this.$router.push('/MaintenanceExperiencel')
        },

        //添加设备信息
        addEquipmentArchives() {
            this.request.post("/device/equipment-archives/addEquipmentArchives", this.form)
                .then(res => {
                    this.$message({
                        showClose: true,
                        message: '添加成功',
                        type: 'success'
                    });
                    this.$router.push('/MaintenanceExperiencel')
                })
        },
        handleSuccesss(response, file) {
            console.log(response)
            this.form.fileList.push({
                name: file.name,
                url: response[0]
            })
        },
        handleDelete(row) {
            this.$confirm(`确定删除文件 ${row.name} 吗？`, '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.form.fileList.splice(this.form.fileList.indexOf(row), 1)
                this.$message.success('删除成功')
            })
        },

        handleSuccess(response, file) {
            const url = response.data
            this.form.bpush({
                name: file.name,
                url: url
            })
        },
        handleExceed(files) {
            this.$message.warning(`当前限制选择 ${this.limit} 张图片，本次选择了 ${files.length} 张图片，已经选择了 ${this.form.imgList.length} 张图片`)
        },
        handleRemove(file) {
            const index = this.form.imgList.indexOf(file)
            this.form.imgList.splice(index, 1)
        },
        associationSelection(vals) {
            this.vals = vals
        },

        //提交
        submitForm() {

        },
        //查询关联订单列表
        addRow() {
            this.dialogVisible = true
            this.selEquipmentArchives()
            this.selPlaceForStorages()
            this.selAllDeviceType()
        },
        //查询备件信息列表
        addRow1() {
            this.dialogVisible1 = true
            this.selSpareLedgers()
        },

        //查询设备档案列表
        selEquipmentArchives() {
                this.request.post("device/equipment-archives/selEquipmentArchives", this.EquipmentArchives).then(res => {
                    this.EquipmentArchivesData = res.data.content
                    this.EquTotal = res.data.total
                    console.log(this.tableData)
                })
        },
        //查询备件信息列表
        selSpareLedgers() {
                this.request.post("spare/spare-ledger/selSpareLedgers", this.SpareLedgers).then(res => {
                    this.SpareLedgersData = res.data.content
                    this.SpaTotal = res.data.total
                    console.log(this.tableData)
                })
        },
        //设备存放位置回显名称
        formatPlaceForStorage(row){
            const Id = row.placeForStorage;
            const Obj = this.placeForStorages.find(obj => obj.id === Id);
            return Obj ? Obj.locationName : '';
        },
        //设备类型回显名称
        formatDeviceTypes(row) {
            const Id = row.deviceType;
            const Obj = this.deviceTypes.find(obj => obj.id === Id);
            return Obj ? Obj.typeName : '';
        },
        //树形查询设备类型
        selAllDeviceType() {
            this.request.get("/device/device-type/selDevice")
                .then(res => {
                    this.deviceTypes = res.data
                })
        },
        //查询设备存放位置信息
        selPlaceForStorages() {
            this.request.get("device/equipment-archives/selPlaceForStorages").then(res => {
                console.log(res)
                this.placeForStorages = res.data
            })
        },
        //订单列表分页跳转数据
        handleSizeChanges(pageSize) {
            this.EquipmentArchives.pagesize = pageSize;
            this.selEquipmentArchives();
        },
        handleChange(value) {
            console.log(value)
        },
        //数据赋值
        handleSelectionChange(rows) {
            this.form.associatedApparatus = rows[0].devicename
            this.form.equipmentCoding = rows[0].equipmentNumber
            this.form.equipmentType = rows[0].deviceType


        },

        no() {

        },

    },
    created() {
        this.selAllDeviceType()
        this.selAllStorages()
        this.selAllDepartments()
        this.selAllSuppliers()

    },
}
</script>

<style scoped>

</style>
